<template>
  <div class="home-container" fixed>
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar">
      <template #title>
        <van-button
          class="search-btn"
          slot="title"
          type="info"
          size="small"
          round
          icon="search">
          搜索
        </van-button>
      </template>
    </van-nav-bar>
    <!-- /导航栏 -->
    <!-- 导航滑块 -->
    <!--
      line-width 底部宽度
      swipeable 是否开启手势滑动切换
      swipe-threshold 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动
    -->
    <van-tabs  class="channel-tabs" v-model="active" line-width="20px" swipeable swipe-threshold="3" animated>
      <van-tab :title="item.name" v-for="item in channels" :key="item.id">
        <!-- 列表块 -->
        <ArticleList :channel="item" />
      </van-tab>
      <div slot="nav-right" class="placeholder"></div>
      <div slot="nav-right" class="hamburger-btn" @click="show = true">
        <i class="toutiao toutiao-gengduo"></i>
      </div>
    </van-tabs>
    <!-- 导航滑块 -->
    <!-- 频道编辑 -->
    <van-popup class="edit-channel-popup" v-model="show" position="bottom" :style="{ height: '100%' }"
      closeable close-icon-position="top-left">
      <ChannelEdit @update-active="onUpdateActive" :active="active" :channels="channels"></ChannelEdit>
    </van-popup>

    <!-- /频道编辑 -->
  </div>
</template>
<script>
import { getUserChannelsApi } from '@/api/index.js'
import ArticleList from './component/article-list.vue'
import ChannelEdit from './component/channel-edit'
import { getItem } from '@/utils/storage.js'
export default {
  name: 'HomeIndex',
  components: { ArticleList, ChannelEdit },
  data () {
    return {
      active: '',
      channels: [], // 频道列表
      show: false // 弹出层显示隐藏
    }
  },
  created () {
    // 调用qpi拿数据
    this.loadChannels()
  },
  methods: {
    // 获取频道列表
    async loadChannels () {
      try {
        // 是否登录状态
        if (this.$store.state.user.token || !getItem('TOUTIAO_CHANNELS')) {
        // 用户已经登录状态
          const { data: res } = await getUserChannelsApi()
          // 获取成功
          this.channels = res.data.channels
        } else {
          // 未登录
          // 本地存储获取数据
          this.channels = getItem('TOUTIAO_CHANNELS')
        }
      } catch (e) {
        this.$toast('获取频道列表数据失败')
      }
    },
    // 修改频道
    onUpdateActive (index, flg = false) {
      this.active = index
      // 当返回值为 false 时，才退出弹窗
      if (!flg) {
        this.show = false
      }
    }
  }
}
</script>
<style scoped lang="less">
/deep/.van-nav-bar__content {
  background-color: #3f96ee;
  position: fixed;
  top: 0;
  width: 100%;
}
.home-container {
  padding-top: 174px;
  padding-bottom: 100px;
  // /deep/
  :deep(.van-nav-bar__title) {
    max-width: unset;
  }

  .search-btn {
    width: 555px;
    height: 64px;
    background-color: #5babfb;
    border: none;
    font-size: 28px;

    .van-icon {
      font-size: 32px;
      color: #fff;
    }
  }
    /deep/ .channel-tabs {
      .van-tabs__wrap {
        position: fixed;
        top: 92px;
        z-index: 1;
        left: 0;
        right: 0;
        height: 82px;
      }

      .van-tab {
        border-right: 1px solid #edeff3;
        min-width: 200px;
        font-size: 30px;
        color: #777777;
      }

      .van-tab--active {
        color: #333333;
      }

      .van-tabs__nav {
        padding-bottom: 0;
      }

      .van-tabs__line {
        bottom: 8px;
        width: 31px !important;
        height: 6px;
        background-color: #3296fa;
      }
      // 三根杠
            .hamburger-btn {
              position: fixed;
              right: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 66px;
              height: 82px;
              background-color: #fff;
              background-color: rgba(255, 255, 255, 0.902);
            }
            // 竖线
        .placeholder {
          flex-shrink: 0;
          /* flex布局需要用这个属性不让它参与flex计算 */
          width: 66px;
          height: 82px;
        }

        .hamburger-btn {
          position: fixed;
          right: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 66px;
          height: 82px;
          background-color: #fff;
          background-color: rgba(255, 255, 255, 0.902);

          i.toutiao {
            font-size: 33px;
          }

          &:before {
            content: "";
            position: absolute;
            left: 0;
            width: 2px;
            height: 58px;
            background-image: url('@/assets/gray-line.png');
            background-size: contain;
          }
        }
    }
        .edit-channel-popup {
          padding-top: 100px;
          box-sizing: border-box;
        }
}
</style>
